<template>
  <div id="app">
  <mt-header :title="selected"  fixed>
  <router-link to="/"  slot="left" fixed v-if="!isHome">
    <mt-button icon="back" @click="back">返回</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>
    <router-view></router-view>
<mt-tabbar v-model="selected"  fixed>
  <mt-tab-item id="项目">
    <router-link class="routerLink" to="/project" active-class="active">
      <img class="icon" :src='this.selected=="项目" ? "src/icon/projectT.png":"src/icon/project.png"' >
     
<p class="guideT">项目</p>
</router-link>
  </mt-tab-item>
  <mt-tab-item id="技能"> 
   <router-link class="routerLink" to="/skill" active-class="active">
  <img class="icon" :src='this.selected=="技能" ? "src/icon/skillL.png":"src/icon/skill.png"'>
    <p class="guideT">技能</p>
    </router-link>
  </mt-tab-item>
  <mt-tab-item id="经历">
  <router-link class="routerLink" to="/expricence" active-class="active">
  <img class="icon" :src='this.selected=="经历" ? "src/icon/experienceE.png":"src/icon/experience.png"'>
    <p >经历</p>
    </router-link>
  </mt-tab-item>
  <mt-tab-item id="个人">
  <router-link class="routerLink" to="/self" active-class="active">
  <img class="icon" :src='this.selected=="个人" ? "src/icon/selfF.png":"src/icon/self.png"'>
  <p>个人</p>
  </router-link>
  </mt-tab-item>
</mt-tabbar>


   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'prictice vue2',
      selected:'',
      isHome:false
    }
  },
  methods:{
    back(){
      console.log("111");
      this.selected='主页';
    },
    chance(){
      console.log("2222")
    }
  },
  watch:{
    selected:function(val,oldVal){
      console.log(val);
      if(val=="主页"){
        this.isHome=true;
    }
    else{
      this.isHome=false
    }
  }
}
}
</script>

<style lang="scss" scoped>
*{
  padding:0;
  margin:0;
}
html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}
a:active{
  color:black;
}
#app {
  height:100%;
  color: #2c3e50;
}
.mint-tabbar{
  border-top:1px solid #e8e8e8;
  background:#e8e8e8;
}
.routerLink{
  display:block;
  width:100%;
  height:100%;
}
.mint-tabbar > .mint-tab-item.is-selected{
  background-color:#fafafa;
}
.icon{
  height:20px;
}
</style>
